<!DOCTYPE html>
<html lang="zh-CN">
    <head>
        <meta charset="UTF-8" />
        <title>25_事件流-DOM0-高级浏览器-默认事件流</title>

        <style>
            #laoda {
                position: relative;
                width: 500px;
                height: 500px;
                background-color: red;
            }

            #laoer {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);

                width: 300px;
                height: 300px;
                background-color: skyblue;
            }

            #laosan {
                position: absolute;
                left: 50%;
                top: 50%;
                transform: translate(-50%,-50%);

                width: 100px;
                height: 100px;
                background-color: green;
            }
        </style>
    </head>
    <body>
        <div id="laoda">
            <div id="laoer">
                <div id="laosan">

                </div>
            </div>
        </div>

        <script>
            var laoda = document.getElementById('laoda');
            var laoer = document.getElementById('laoer');
            var laosan = document.getElementById('laosan');

            laoda.attachEvent('onclick',function(){
                console.log('laoda');
            })

            laoer.attachEvent('onclick',function(){
                console.log('laoer');
            })

            laosan.attachEvent('onclick',function(){
                console.log('laosan');
            })
        </script>
    </body>
</html>